<template>
    <div>
        <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
            <a-row>
                <a-col :span="4">
                    <a-form-item label="" name="num1" class="version-number1-form-item">
                        <a-input
                            :disabled="versionDisabled || subVersionDisabled"
                            v-model:value="form.num1"
                            :min="1"
                            :max="1000"
                            style="width: 100%"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="1">
                    <span style="margin: 0 8px">.</span>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="" name="num2">
                        <a-input :disabled="versionDisabled" v-model:value="form.num2" :min="1" :max="1000" style="width: 100%" />
                    </a-form-item>
                </a-col>
                <a-col :span="1">
                    <span style="margin: 0 8px">.</span>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="" name="num3">
                        <a-input :disabled="subVersionDisabled" v-model:value="form.num3" style="width: 100%" />
                    </a-form-item>
                </a-col>
                <a-col :span="1">
                    <span style="margin: 0 8px">.</span>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="" name="num4">
                        <a-input :disabled="subVersionDisabled" v-model:value="form.num4" style="width: 100%" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, computed, nextTick } from 'vue';
export default defineComponent({
    props: {
        // 是支线版本还是预发布版本
        versionInfo: {
            type: Object,
            default: () => ({})
        },
        // 支线版本信息
        subVersionInfo: {
            type: Object,
            default: () => ({})
        },
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const ruleFormRef = ref<any>(null);
        const state = reactive<any>({
            form: {
                num1: '',
                num2: '',
                num3: '',
                num4: ''
            }
        });
        // 预发布版本禁用逻辑
        const versionDisabled = computed(() => {
            return props.versionInfo.type === '3' && props.subVersionInfo.signPostShowType !== '3';
        });
        // 支线版本禁用逻辑
        const subVersionDisabled = computed(() => {
            return props.versionInfo.type === '2';
        });
        const versionNumber = computed(() => {
            if (!state.form.num2) {
                state.form.num2 = 0;
            }
            if (!state.form.num3) {
                state.form.num3 = 0;
            }
            if (!state.form.num4) {
                state.form.num4 = 0;
            }
            const { num1, num2, num3, num4 } = state.form;
            return `${num1}.${num2}.${num3}.${num4}`;
        });
        const validateVersionNumber1 = async (rule: any, value: any) => {
            if (value) {
                const reg = /^[a-zA-Z0-9-]*$/gi;
                return reg.test(value) ? Promise.resolve() : Promise.reject('格式不正确');
            } else {
                return Promise.resolve();
            }
        };
        const validateVersionNumber = async (rule: any, value: any) => {
            if (value) {
                const reg = /^[a-zA-Z0-9]*$/gi;
                return reg.test(value) ? Promise.resolve() : Promise.reject('格式不正确');
            } else {
                return Promise.resolve();
            }
        };
        const rules = {
            num1: [
                {
                    required: true,
                    message: '不能为空',
                    trigger: 'change'
                },
                { validator: validateVersionNumber1, trigger: 'change' }
            ],
            num2: [{ validator: validateVersionNumber, trigger: 'change' }],
            num3: [{ validator: validateVersionNumber, trigger: 'change' }],
            num4: [{ validator: validateVersionNumber, trigger: 'change' }]
        };
        const validate = () => {
            return new Promise((res, rej) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            res(true);
                        },
                        () => {
                            rej(false);
                        }
                    );
            });
        };
        const init = () => {
            nextTick(() => {
                unref(ruleFormRef) && unref(ruleFormRef).clearValidate();
            });
            // 支线版本
            if (props.versionInfo.type === '2') {
                if (props.versionInfo.id) {
                    const arr = props.versionInfo.versionNumber.split('.');
                    console.log(arr);
                    if (arr.length) {
                        arr.forEach((item, index) => {
                            state.form[`num${index + 1}`] = item;
                        });
                    }
                } else {
                    state.form.num3 = 0;
                    state.form.num4 = 0;
                }
                if (props.lubiaoDetail.pmpRegisteredProjectDTO) {
                    if (props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO) {
                        const versionNumber = props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO.versionNumber;
                        if (versionNumber) {
                            const arr = versionNumber.split('.');
                            state.form.num1 = arr[0];
                        }
                    }
                }
            } else if (props.versionInfo.type === '3') {
                if (props.versionInfo.id) {
                    const arr = props.versionInfo.versionNumber.split('.');
                    console.log(arr);
                    if (arr.length) {
                        arr.forEach((item, index) => {
                            state.form[`num${index + 1}`] = item;
                        });
                    }
                } else {
                    let arr = [];
                    if (props.lubiaoDetail.pmpVersionManagementDTO) {
                        arr = props.lubiaoDetail.pmpVersionManagementDTO.versionNumber.split('.');
                        if (arr.length) {
                            state.form.num1 = arr[0];
                            state.form.num2 = arr[1];
                        }
                    }
                }
            }
        };
        init();
        return {
            ruleFormRef,
            ...toRefs(state),
            versionNumber,
            rules,
            validate,
            versionDisabled,
            subVersionDisabled
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.version-number1-form-item) {
    .ant-form-item-explain-error {
        display: block !important;
    }
}
</style>